<%@ page import="com.itjob.scott.language.entity.LanguageEntity"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>

<!-- 导入core标签库 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>register</title>
<link rel="stylesheet" href="css/calendar.css">
<style type="text/css">
.error {
	border: 2px solid red;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript">
$(function(){
	$(":button").click(function(){
		
		// ---- 表单校验 ----
		$("form :input, form textarea, form select").removeClass("error");
		
		var username = $(":input[name=username]");
		// 用户名必填
		if(username.val() == "") {
			username.addClass("error").select();
			alert("用户名不能为空。");
			return;
		}
		
		// 用户名格式校验
		var reg = /^[a-z_]\w{3,9}$/ig;
		if(!reg.test(username.val())) {
			username.addClass("error").select();
			alert("用户名格式不正确。\n  规则如下：\n1. 长度不能小于4位，且不能超过10位；\n2. 内容只允许字母、数字和下划线的组合，且不能以数字开头。");
			return;
		}
		
		var password = $(":input[name=password]");
		var passwordConfirm = $(":input[name=passwordConfirm]");
		// 密码必填
		if(password.val() == "") {
			password.addClass("error").select();
			alert("密码不能为空。");
			return;
		}
		
		// 密码格式校验
		reg = /^[^\u2E80-\u9FFF]{8,20}$/;
		if(!reg.test(password.val())) {
			password.addClass("error").select();
			alert("密码格式不正确。\n规则如下：\n1. 长度不能小于8位，且不能超过20位；\n2. 不允许输入中文。");
			return;
		}
		
		// 密码确认校验
		if(password.val() != passwordConfirm.val()) {
			passwordConfirm.addClass("error").select();
			alert("密码确认与密码不一致。");
			return;
		}
		
		// 性别校验
		if($(":radio:checked").length == 0) {
			alert("性别不能不选。");
			return;
		}
		
		// 出生日期
		var birthday = $(":input[name=birthday]");
		// 出生日期必填
		if(birthday.val() == "") {
			birthday.addClass("error");
			alert("出生日期不能为空。");
			return;
		}
		
		// 出生日期不能大于今天
		var year = birthday.val().split("/")[0] - 0;
		var month = birthday.val().split("/")[1] - 1;
		var date = birthday.val().split("/")[2] - 0;
		var currentDate = new Date(year, month, date);
		var today = new Date();
		today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
		if(currentDate.getTime() > today.getTime()) {
			birthday.addClass("error");
			alert("出生日期不能大于今天。");
			return;
		}
		
		// 学历校验
		var select = $(":selected");
		// 学历必填
		if(select.val() == ""){
			$("select").addClass("error");
			alert("学历不能不选。");
			return;
		}
		
		// 语言能力校验
		if($(":checkbox:checked").length == 0){
			alert("语言能力不能不选。");
			return;
		}
		
		// 简介校验
		var intro = $("textarea");
		// 简介必填
		if(intro.html().length < 10 || intro.html().length > 200) {
			intro.addClass("error");
			alert("简介长度应在10-200之间。");
			return;
		}
		
		//发ajax请求
		var url ="${pageContext.request.contextPath}/register";
		var data={
				username:$(":text[name=username]").val(),
				password:$(":password[name=password]").val(),
				gender:$(":radio:checked").val(),
				birthday:$(":text[name=birthday]").val(),
				education:$(":selected").val(),
				langs:buildLanguageEntity(),
				intro:$("textarea[name=intro]").html(),
		
		};
		var callback= function(data){
			//把字符串转化为json对象
			var r = eval("("+data+")");
			if(r.status == 0){
				alert(r.errorInfo);
			}else{
				window.location.href = r.url +"?username="+$(":text[name=username]").val();
			}
		};
		
		$.post(url,data,callback);
	});
});

function buildLanguageEntity(){
	
	var lang=",";
	$(":checkbox:checked").each(function(){
		lang += ","+$(this).attr("id");
	});
	return lang.substring(1);
}
</script>
</head>
<body>
	<table>
		<tr>
			<th colspan="2" align="left"><h2>用户注册</h2>
			</th>
		</tr>
		<tr>
			<td>用户名</td>
			<td><input type="text" name="username" maxlength="10" value="xyzxyz">
			</td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" name="password" value="12345678">
			</td>
		</tr>
		<tr>
			<td>密码确认</td>
			<td><input type="password" name="passwordConfirm" value="12345678">
			</td>
		</tr>
		<tr>
			<td>性别</td>
			<td>
				<input type="radio" id="male"  name="gender" value="male"><label for="male">男</label>
				<input type="radio" id="female" checked="checked" name="gender" value="female"><label for="female">女</label>
			</td>
		</tr>
		<tr>
			<td>出生日期</td>
			<td><input type="text" name="birthday" class="deepui-calendar">
			</td>
		</tr>
		<tr>
			<td>学历</td>
			<td><select name="education">
					<option value="">-- 请选择 --</option>
					<option value="middleSchool">初中</option>
					<option value="heightSchool">高中</option>
					<option value="junior">大专</option>
					<option value="regular" selected="selected">本科</option>
					<option value="graduate">研究生</option>
					<option value="doctor">博士</option>
			</select></td>
		</tr>
		<tr>
			<td>语言能力</td>
			<td>
				<c:forEach var="language" items="${requestScope.languageEntities}">
					<input type="checkbox" checked="checked" id="${language.languageKey}" name="${language.languageKey}">
					<label for="${language.languageKey}">${language.languageValue}</label>
				</c:forEach>
			</td>
		</tr>
		<tr>
			<td>简介</td>
			<td><textarea name="intro" rows="4">xysdfsdfsdfsdfsdfz10086</textarea></td>
		</tr>
		<tr>
			<td colspan="2" align="center"><input type="button" value="提交">
				<input type="reset">
				<a href="javascript: window.history.back();">返回</a>
			</td>
		</tr>
	</table>
</body>
</html>
